import { useContext, useEffect, useRef } from "react";
import { echaresContext } from "../../context/index";
import ApiClient from "../../axios/index";
import "./index.less";
import { EChartsType } from "echarts";
import china from "../../json/china.json";
import { getProvinceMapInfo } from "../../utils/map_utils";
const Map = () => {
  const context = useContext(echaresContext);
  const trendRef = useRef<HTMLDivElement>(null);
  const allData = useRef(null);
  const echarts = useRef<EChartsType | null>(null);
  let startValue = 0;
  let endValue = 5;
  let timer: number;

  // 初始化
  const initEcharts = () => {
    echarts.current = context.init(trendRef.current, "dark");
    // echarts.current.on("click", (params) => {
    //   getProvinceMapInfo(params.name).then((res) => {
    //     context.registerMap(res.name, res.data);
    //     const option = {
    //       geo: {
    //         map: res.name,
    //       },
    //     };
    //     echarts.current && echarts.current.setOption(option);
    //   });
    // });
    // context.registerMap("china", china);
    const option = {
      title: {
        text: "商家分布图",
        left: "center",
      },
      xAxis: {
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      series: {
        type: "bar",
      },
      tooltip: {},
      // legend: {
      //   orient: "vertical",
      //   left: "left",
      //   bottom: "5%",
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: 12,
      //   },
      // },
    };
    echarts.current && echarts.current.setOption(option);
    echarts.current.on("mouseover", () => {
      clearInterval(timer);
    });
    echarts.current.on("mouseout", () => {
      startInterval();
    });
  };
  // 更新数据
  const updateEcharts = () => {
    // const mouth = allData.current && allData.current.common.month;
    const seriesArr =
      allData.current &&
      allData.current
        .map((item) => {
          return {
            name: item.name,
            value: item.value,
          };
        })
        .sort((a, b) => {
          return a.value - b.value;
        });
    const option = {
      xAxis: {
        data: seriesArr!.map((item) => item.name),
      },
      series: {
        data: seriesArr.map((item) => item.value),
      },
      dataZoom: {
        show: false,
        startValue,
        endValue,
      },
      // legend: {
      //   data: seriesArr!.map((item) => item.name),
      // },
    };
    // 更新数据
    echarts.current && echarts.current.setOption(option);
  };
  // 屏幕大小改变
  const screenResize = () => {
    const fontSize = (trendRef.current?.offsetWidth / 100) * 3.6;
    const option = {
      legend: {
        itemWidth: fontSize,
        itemHeight: fontSize,
        itemGap: fontSize,
        textStyle: {
          fontSize: fontSize / 2,
        },
      },
    };
    echarts.current && echarts.current.setOption(option);
    echarts.current && echarts.current.resize();
  };
  // 获取数据
  const getData = () => {
    const apiClient = new ApiClient();
    apiClient.get("/rank").then((res) => {
      allData.current = res.data;
      updateEcharts();
    });
    startInterval();
  };
  //
  const handleBackChina = () => {
    initEcharts();
  };
  //
  const startInterval = () => {
    timer && clearInterval(timer);
    timer = setInterval(() => {
      startValue++;
      endValue++;
      if (endValue > allData.current!.length - 1) {
        startValue = 0;
        endValue = 9;
      }
      updateEcharts();
    }, 2000);
  };
  useEffect(() => {
    initEcharts();
    getData();
    window.addEventListener("resize", screenResize);
    screenResize();
    return () => {
      window.removeEventListener("resize", screenResize);
      clearInterval(timer);
    };
  }, []);
  return (
    <div
      className="trend-container"
      ref={trendRef}
      onDoubleClick={handleBackChina}
    ></div>
  );
};
export default Map;
